<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>图表统计</title>
		<link rel="stylesheet" href="../../assets/lib/bootstrap.css" />
		<link rel="stylesheet" href="../../assets/lib/main.css" />
		<script src="../../assets/lib/jquery.js"></script>
		<script
			type="text/javascript"
			src="../../assets/lib/echarts.min.js"
		></script>
	</head>

	<body>
		<div class="container-fluid">
			<div class="row spannel_list">
				<div class="col-sm-3 col-xs-6">
					<div class="spannel">
						<em>10015</em><span>篇</span>
						<b>总文章数</b>
					</div>
				</div>
				<div class="col-sm-3 col-xs-6">
					<div class="spannel scolor01">
						<em>123</em><span>篇</span>
						<b>日新增文章数</b>
					</div>
				</div>
				<div class="col-sm-3 col-xs-6">
					<div class="spannel scolor02">
						<em>35</em><span>条</span>
						<b>评论总数</b>
					</div>
				</div>
				<div class="col-sm-3 col-xs-6">
					<div class="spannel scolor03">
						<em>123</em><span>条</span>
						<b>日新增评论数</b>
					</div>
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="row curve-pie">
				<div class="col-lg-8 col-md-8">
					<div class="gragh_pannel" id="curve_show"></div>
				</div>
				<div class="col-lg-4 col-md-4">
					<div class="gragh_pannel" id="pie_show"></div>
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="column_pannel" id="column_show"></div>
		</div>

		<script>
			var oChart = echarts.init(document.getElementById('curve_show'))
			var aList_all = [
				{ count: 36, date: '2022-04-13' },
				{ count: 52, date: '2022-04-14' },
				{ count: 78, date: '2022-04-15' },
				{ count: 85, date: '2022-04-16' },
				{ count: 65, date: '2022-04-17' },
				{ count: 72, date: '2022-04-18' },
				{ count: 88, date: '2022-04-19' },
				{ count: 64, date: '2022-04-20' },
				{ count: 72, date: '2022-04-21' },
				{ count: 90, date: '2022-04-22' },
				{ count: 96, date: '2022-04-23' },
				{ count: 100, date: '2022-04-24' },
				{ count: 102, date: '2022-04-25' },
				{ count: 110, date: '2022-04-26' },
				{ count: 123, date: '2022-04-27' },
				{ count: 100, date: '2022-04-28' },
				{ count: 132, date: '2022-04-29' },
				{ count: 146, date: '2022-04-30' },
				{ count: 200, date: '2022-05-01' },
				{ count: 180, date: '2022-05-02' },
				{ count: 163, date: '2022-05-03' },
				{ count: 110, date: '2022-05-04' },
				{ count: 80, date: '2022-05-05' },
				{ count: 82, date: '2022-05-06' },
				{ count: 70, date: '2022-05-07' },
				{ count: 65, date: '2022-05-08' },
				{ count: 54, date: '2022-05-09' },
				{ count: 40, date: '2022-05-10' },
				{ count: 45, date: '2022-05-11' },
				{ count: 38, date: '2022-05-12' },
			]

			let aCount = []
			let aDate = []

			for (var i = 0; i < aList_all.length; i++) {
				aCount.push(aList_all[i].count)
				aDate.push(aList_all[i].date)
			}

			var chartopt = {
				title: {
					text: '月新增文章数',
					left: 'center',
					top: '10',
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: ['新增文章'],
					top: '40',
				},
				toolbox: {
					show: true,
					feature: {
						mark: { show: true },
						dataView: { show: true, readOnly: false },
						magicType: { show: true, type: ['line', 'bar'] },
						restore: { show: true },
						saveAsImage: { show: true },
					},
				},
				calculable: true,
				xAxis: [
					{
						name: '日',
						type: 'category',
						boundaryGap: false,
						data: aDate,
					},
				],
				yAxis: [
					{
						name: '月新增文章数',
						type: 'value',
					},
				],
				series: [
					{
						name: '新增文章',
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								areaStyle: { type: 'default' },
								color: '#f80',
							},
							lineStyle: { color: '#f80' },
						},
						data: aCount,
					},
				],
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: 'rgba(255,136,0,0.39)',
							},
							{
								offset: 0.34,
								color: 'rgba(255,180,0,0.25)',
							},
							{
								offset: 1,
								color: 'rgba(255,222,0,0.00)',
							},
						]),
					},
				},
				grid: {
					show: true,
					x: 50,
					x2: 50,
					y: 80,
					height: 220,
				},
			}

			oChart.setOption(chartopt)

			var oPie = echarts.init(document.getElementById('pie_show'))
			var oPieopt = {
				title: {
					top: 10,
					text: '分类文章数量比',
					x: 'center',
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)',
				},
				color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'],
				legend: {
					x: 'center',
					top: 65,
					data: ['奇趣事', '会生活', '爱旅行', '趣美味'],
				},
				toolbox: {
					show: true,
					x: 'center',
					top: 35,
					feature: {
						mark: { show: true },
						dataView: { show: true, readOnly: false },
						magicType: {
							show: true,
							type: ['pie', 'funnel'],
							option: {
								funnel: {
									x: '25%',
									width: '50%',
									funnelAlign: 'left',
									max: 1548,
								},
							},
						},
						restore: { show: true },
						saveAsImage: { show: true },
					},
				},
				calculable: true,
				series: [
					{
						name: '访问来源',
						type: 'pie',
						radius: ['45%', '60%'],
						center: ['50%', '65%'],
						data: [
							{ value: 200, name: '奇趣事' },
							{ value: 100, name: '会生活' },
							{ value: 260, name: '爱旅行' },
							{ value: 180, name: '趣美味' },
						],
					},
				],
			}
			oPie.setOption(oPieopt)

			var oColumn = this.echarts.init(
				document.getElementById('column_show')
			)
			var oColumnopt = {
				title: {
					text: '文章访问量',
					left: 'center',
					top: '10',
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: ['奇趣事', '会生活', '爱旅行', '趣美味'],
					top: '40',
				},
				toolbox: {
					show: true,
					feature: {
						mark: { show: true },
						dataView: { show: true, readOnly: false },
						magicType: { show: true, type: ['line', 'bar'] },
						restore: { show: true },
						saveAsImage: { show: true },
					},
				},
				calculable: true,
				xAxis: [
					{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月'],
					},
				],
				yAxis: [
					{
						name: '访问量',
						type: 'value',
					},
				],
				series: [
					{
						name: '奇趣事',
						type: 'bar',
						barWidth: 20,
						itemStyle: {
							normal: {
								areaStyle: { type: 'default' },
								color: '#fd956a',
							},
						},
						data: [800, 708, 920, 1090, 1200],
					},
					{
						name: '会生活',
						type: 'bar',
						barWidth: 20,
						itemStyle: {
							normal: {
								areaStyle: { type: 'default' },
								color: '#2bb6db',
							},
						},
						data: [400, 468, 520, 690, 800],
					},
					{
						name: '爱旅行',
						type: 'bar',
						barWidth: 20,
						itemStyle: {
							normal: {
								areaStyle: { type: 'default' },
								color: '#13cfd5',
							},
						},
						data: [500, 668, 520, 790, 900],
					},
					{
						name: '趣美味',
						type: 'bar',
						barWidth: 20,
						itemStyle: {
							normal: {
								areaStyle: { type: 'default' },
								color: '#00ce68',
							},
						},
						data: [600, 508, 720, 890, 1000],
					},
				],
				grid: {
					show: true,
					x: 50,
					x2: 30,
					y: 80,
					height: 260,
				},
				dataZoom: [
					//给x轴设置滚动条
					{
						start: 0, //默认为0
						end: 100 - 1000 / 31, //默认为100
						type: 'slider',
						show: true,
						xAxisIndex: [0],
						handleSize: 0, //滑动条的 左右2个滑动条的大小
						height: 8, //组件高度
						left: 45, //左边的距离
						right: 50, //右边的距离
						bottom: 26, //右边的距离
						handleColor: '#ddd', //h滑动图标的颜色
						handleStyle: {
							borderColor: '#cacaca',
							borderWidth: '1',
							shadowBlur: 2,
							background: '#ddd',
							shadowColor: '#ddd',
						},
					},
				],
			}
			oColumn.setOption(oColumnopt)
		</script>
	</body>
</html>
